<template>
  <view class="coursesLearned">
    <view class="course-header">
      <text class="course-title">最近在学</text>
    </view>
    <coursesLearned :courses="courses" :display="true"></coursesLearned>
  </view>
</template>

<script>
import coursesLearned from "./coursesLearned.vue";
import {getCoursesLearnedList} from "../../api/new";
export default {
  name: "index",
  components:{
    coursesLearned
  },
  data(){
    return{
      courses:[],
      propagation:{
        limit:10,
        page:1,
      }
    }
  },
  methods:{
    getList(){
      getCoursesLearnedList(this.propagation).then(res=>{
        if (this.propagation.page === 1) {
          this.courses=res.data.list
        } else {
          this.courses = [...this.courses, ...res.data.list];
        }
        if(res.data.total>this.courses.length){
          this.propagation.page=res.data.page+1
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">

$colorTit: #231917;
$colorContent: #53433F;
.coursesLearned{
  padding: 0 15px 15px;
  .course-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 11px;
    .course-title {
      font-size: 20px;
      font-weight: bold;
      color: $colorTit;
    }
    .more-btn {
      display: flex;
      align-items: center;
      color: #8F4C38;
      font-weight: bold;
      .more{
        width: 16rpx;
        height: 24rpx;
        margin-top: 2px;
        margin-left: 12rpx;
      }
    }
  }
}
</style>